<!--  -->
<template>
  <el-dialog title="新增核算单元" :visible.sync="dialogVisible" width="1000px" @close="close()">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="120px" :inline="true">
      <div class="dialog_row">
        <el-form-item label="核算单元名称" prop="name">
          <el-input placeholder="请输入核算单元名称" style="width: 300px" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="核算类型" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择核算类型">
            <el-option label="用能量" value="01"></el-option>
            <el-option label="产能量" value="02"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="dialog_row">
        <el-form-item label="核算单元类型" prop="resource">
          <el-radio-group v-model="ruleForm.resource" style="width:300px">
            <el-radio label="0">核算单元</el-radio>
            <el-radio label="1">临时核算单元</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="能源类型">
          <el-checkbox-group v-model="checkbox_group_value" @change="energyType_change">
            <el-checkbox
              :label="item"
              v-for="(item,index) in checkbox_group"
              :key="index"
            >{{item === '01'?'电':'蒸汽'}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>-->
      </div>
      <div class="dialog_row">
        <el-tabs type="border-card" v-model="el_tab_a_value" @tab-click="el_tab_a_click">
          <el-tab-pane v-for="(item,index) in el_tab_a_data" :key="index" :label="item.type==='01'?'新增能源-电':'新增能源-蒸汽'" :name="item.type">
            <el-input @input="newVal(index,item)" v-model="item.search_value" suffix-icon="el-icon-search" placeholder="请输入仪表名称" style="width: 200px;margin-bottom:15px"></el-input>
            <el-tabs type="border-card" v-model="item.el_tab_b_value" @tab-click="el_tab_b_click">
              <el-tab-pane v-for="(item_c,index_c) in item.el_tab_b_data" :key="index_c" :label="item_c.name" :name="item_c.name">
                <div class="tab_list">
                  <div v-for="(item_n,index_n) in item_c.mete" :key="index_n" :class="[{'search':item_n.search},{'add_reduction':item_n.add_reduction}]">
                    <span>{{item_n.name}}</span>
                    <i class="el-icon-circle-plus" @click="add_reduction('+',index,index_c,index_n,item_n)"></i>
                    <i class="el-icon-remove" @click="add_reduction('-1',index,index_c,index_n,item_n)"></i>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
    <div class="gongshi">
      <div v-for="(item,index) in el_tab_a_data" :key="index" class="type">
        <div class="left">
          <el-checkbox v-model="item.checked">{{item.type === '01'?'核算公式 (电)':'核算公式 (蒸汽)'}}</el-checkbox>
        </div>
        <div class="right">
          <div v-for="(item_c,index_c) in item.formula" :key="index_c">
            <el-tooltip placement="top" effect="light">
              <div slot="content">
                <el-button type size="mini">{{item_c.name}}</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove(item_c,index_c)"></el-button>
                <el-button size="mini" type="primary" :icon="item_c.type==='+'?'el-icon-plus':'el-icon-minus'" circle @click="change(item_c,index_c)"></el-button>
              </div>
              <span style="color:rgba(7, 128, 237,1)">
                <i :class="item_c.type==='+'?'el-icon-plus':'el-icon-minus'" style="color:#333"></i>
                {{item_c.loopNumber}}
              </span>
            </el-tooltip>
            <!-- <span class="delete">
                      <i class="el-icon-close"></i>
            </span>-->
          </div>
        </div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'zhaoxiongfei',
  props: {
    id: '',
    parentIsAccount: ''
  },
  data() {
    return {
      formulas: [],
      el_tab_a_value: '01',
      el_tab_a_data: [],
      el_tab_a_index: 0,
      el_tab_b_index: 0,




      EnergyType: JSON.parse(sessionStorage.getItem('EnergyType')),
      dialogVisible: true,
      ruleForm: {
        name: '',//核算单元名称
        region: '',//核算类型
        resource: '',//核算单元类型
      },
      rules: {
        name: [
          { required: true, message: '请输入核算单元名称', trigger: 'change' },
          // { min: 1, max: 8, message: '长度在 1 到 8个字符', trigger: 'change' }
        ],
        region: [
          { required: true, message: '请选择核算类型', trigger: 'change' }
        ],
        energyType: [
          { required: true, message: '请选择能源类型', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择核算单元类型', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'chenge' }
        ]
      },
    }
  },
  created() {
    this.EnergyType.map((item, index) => {
      if (item === 1) {
        this.el_tab_a_data.push({
          type: '0' + (index + 1),
          search_value: '',
          el_tab_b_data: [],
          el_tab_b_value: '',
          formula: [],
          checked: true
        })
        this.getMeterLevel('0' + (index + 1), index)
      }
    })
  },
  methods: {
    submitForm(formName) {
      console.log(this.el_tab_a_data)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.el_tab_a_data.map((item, index) => {
            if (item.checked && item.formula.length) {
              this.formulas.push({
                formulaId: null,
                formulaType: item.type,
                formulaInfos: item.formula.map((item, index) => {
                  return {
                    meterNo: item.loopNumber,
                    symbol: item.type
                  }
                })
              })
            }
          })
          // let n = 0
          // this.formulas.map((item,index)=>{
          //   console.log(item.formulaInfos.length)
          //   if(item.formulaInfos.length){
          //     n++
          //   }
          // })
          // if(n === this.formulas.length){
          //             // 保存核算单元new
          this.saveAccountingUnit()
          // }else{
          //    this.$message({
          //   type: 'error',
          //   message: '核算公式不能为空！'
          // })
          // }

        } else {
          this.$message({
            type: 'error',
            message: '请完善信息'
          })
          // console.log('error submit!!')
          return false
        }
      })
    },
    remove(item, index) {
      this.el_tab_a_data[item.index].formula.splice(index, 1)
      this.$set(this.el_tab_a_data[item.index].el_tab_b_data[item.index_c].mete[item.index_n], "add_reduction", false)
    },
    change(item, index) {
      if (this.el_tab_a_data[item.index].formula[index].type === '+') {
        this.el_tab_a_data[item.index].formula[index].type = '-1'
      } else {
        this.el_tab_a_data[item.index].formula[index].type = '+'
      }
    },
    add_reduction(type, index, index_c, index_n, item_n) {
      this.$set(this.el_tab_a_data[index].el_tab_b_data[index_c].mete[index_n], "add_reduction", true)
      this.el_tab_a_data[index].formula.push({
        name: item_n.name,
        loopNumber: item_n.loopNumber,
        type: type,
        index: index,
        index_c: index_c,
        index_n: index_n
      })
    },


    el_tab_a_click(tab, event, index) {
      this.el_tab_a_index = tab.index
    },
    el_tab_b_click(tab, event, index) {
      this.el_tab_b_index = tab.index
    },
    newVal(index, item) {
      console.log(item.search_value)
      console.log(this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete)
      if (item.search_value) {
        this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete.map((item_s, index) => {
          if (item_s.name.includes(item.search_value)) {
            this.$set(this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete[index], "search", true)
            // this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete[index].search = true
            // console.log( this.el_tab_a_data)
          } else {
            this.$set(this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete[index], "search", false)
            // this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete[index].search = false
          }
          console.log(this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete[index].search)
        })
      } else {
        this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete.map((item_s, index) => {
          this.$set(this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete[index], "search", false)
          // this.el_tab_a_data[this.el_tab_a_index].el_tab_b_data[this.el_tab_b_index].mete[index].search = false
        })
      }
    },
    getMeterLevel(type, index) {
      this.$axios.get(this.Eelec + "/accountUnit/getMeterLevel", {
        params: {
          custId: sessionStorage.getItem("custId"),
          // energyType: this.ruleForm.energyType
          energyType: type
        }
      }).then((res) => {
        // console.log(res.data.data)
        this.el_tab_a_data[index].el_tab_b_data = res.data.data
        this.el_tab_a_data[index].el_tab_b_value = res.data.data[0].name
        console.log(this.el_tab_a_data)
      })
    },
    energyType_change(n) {
      this.energyType_tab_active = n[0]
      // this.he_suan_gong_shi = []
      // this.formula = []
      // this.activeName = 'a0'
      // n.map((item, index) => {
      //   if (!this['checkbox_data_' + item].length) {
      //     this.getMeterLevel(item, [])
      //   }
      // })
    },
    saveAccountingUnit() {
      this.$axios.post(this.Eelec + "/accountUnit/saveAccountingUnit", {
        formulaId: null,
        id: null,
        custId: sessionStorage.getItem("custId"),
        formulas: this.formulas,
        isTemp: this.ruleForm.resource,
        name: this.ruleForm.name,
        parentId: this.id,
        parentIsAccount: this.parentIsAccount !== 'unit' ? false : true,
        type: this.ruleForm.region
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.data) {
            this.$emit('close', false, true)
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        } else if (res.data.code === 1002) {
          this.$message({
            type: 'error',
            message: '核算公式不能都是负的'
          })
        }
      }).catch((err) => {
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    close() {
      this.$emit('close', false.false)
    },
    cancel() {
      this.close()
    },
    submit() {
      this.close()
    }
  },
  mounted() { },
  components: {},
}

</script>
